<template>
  <div class="sys-main">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="备份" name="copy">
        <BackupsTask :dbInfo="props.dbInfo" :databaseInfo="props.databaseInfo"></BackupsTask>
      </el-tab-pane>
      <el-tab-pane label="集群" name="cluster">
        <ClusterInfo :dbInfo="props.dbInfo" :databaseInfo="props.databaseInfo"/>
      </el-tab-pane>
			<el-tab-pane label="慢SQL" name="slowsql">
        <SlowSql :dbInfo="props.dbInfo" :databaseInfo="props.databaseInfo"></SlowSql>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { ref,defineProps } from "vue";
import BackupsTask from "./BackupsTask.vue";
import ClusterInfo from "./ClusterInfo.vue";
import SlowSql from "./SlowSql.vue";
//tab组件相关
const activeName = ref("copy");
const props = defineProps({
	dbInfo:{
		type:Object,
		default:{},
	},
	databaseInfo:{
		type:Array,
		default:[]
	}
})
</script>
<style scoped>
.sys-main {
  width: 100%;
  height: 100%;
}
</style>
